<template>
  <el-table :data="keyData">
  		<el-table-column label="序号" width="70" type="index"/>
		<el-table-column label="预期类型" prop="type" align="center" width="200px">
			<template #default="scope">
				<el-select v-model="scope.row.type" style="width: 100%;">
					<el-option v-for="value in type_list" :label="value" :value="value" ></el-option>
				</el-select>
			</template>
		</el-table-column>
  		<el-table-column label="循环次数" prop="exp" align="center">
  			<template #default="scope">
				<el-input v-if="scope.row.type ==='Dynamic'" style="width: 100%; box-sizing: border-box;" v-model="scope.row.exp" :disabled="readOnly" placeholder="请输入表达式"></el-input>
				<el-input-number v-if="scope.row.type ==='Int'" v-model="scope.row.exp" :step="1"   style="width: 100%;"/>
  			</template>
  		</el-table-column>
  		<el-table-column align="center" width="400px">
			<template #header>
				<el-button v-if='keyData.length === 0' :icon="Plus" size="small" type='primary' @click="keyData.push(JSON.parse(JSON.stringify(this.json_row_data)))" :disabled="readOnly">新增</el-button>
			</template>
  			<template #default="scope">
  			  <el-button :icon="Delete" @click="deleteApiParams(scope.$index)" size="small" type="danger" :disabled="readOnly">删除</el-button>
  			</template>
  		</el-table-column>
  </el-table>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import { View, Delete, Edit, Plus, EditPen, CopyDocument, Top, Bottom, Loading} from '@element-plus/icons-vue'

export default{
	setup() {
		return {
			Edit,
			Delete,
			Plus,
			View,
			Loading,
			EditPen,
			CopyDocument,
			Top,
			Bottom,
		}
	},
	props: ['keyData', 'readOnly'],
	data() {
		return {
			type_list: ['Int', "Dynamic"],
			json_row_data: {
				exp: '',
				type: 'Int',
			},
			bodyType: 'json',
		}
	},
	methods: {
		addApiParams(index){
			const row_data = JSON.parse(JSON.stringify(this.json_row_data))
			this.keyData.splice(index + 1, 0, row_data)
		},
		deleteApiParams(index){
			this.keyData.splice(index, 1)
		},
	},
	created() {
	}
}

</script>

<style scoped>
	
</style>